<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('bff接口 字段参数选择页面')" />
    <script th:src="@{/js/go.js}"></script>
</head>
<body>
<div class="wrapper wrapper-content field">
    <div id="myDiagramDiv2" style="background-color: white;width: 100%; height: 1440px; position: relative; cursor: auto;">
        <canvas tabindex="0" width="904"  style="position: absolute; top: 0px; left: 0px; z-index: 2; user-select:
        none; width: 904px; height: 1440px; cursor: auto;">This
            text is displayed if your browser does not support the Canvas HTML element.</canvas>
    </div>
</div>
</body>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    const prefix = ctx + "table/table";
    var id = [[${tableId}]];
    var type = [[${type}]];
    if (window.goSamples) goSamples();
    var $go = go.GraphObject.make;
    myDiagram =
        $go(go.Diagram, "myDiagramDiv2",
            {
                allowDelete: false,
                allowCopy: false,
                layout: $go(go.ForceDirectedLayout),
                "undoManager.isEnabled": true
            });
    // name设置
    var itemTempl =
        $go(go.Panel, "Horizontal",
            $go(go.Panel, "Table",
                $go(go.RowColumnDefinition,{ row: 1, separatorStrokeWidth: 1.5, separatorStroke: "black" }),
                $go(go.TextBlock, new go.Binding("text", "keyType"), { row: 1, column: 0, width:18, margin: new go.Margin(2, 4, 2, 0) }),
                $go(go.TextBlock, new go.Binding("text", "keyName"), { row: 1, column: 1, width:140, margin: new go.Margin(2, 10, 2, 4) }),
                $go(go.TextBlock, new go.Binding("text", "keyEnName"), { row: 1, column: 2, width:160, margin: new go.Margin(2, 10, 2, 4) }),
                $go(go.TextBlock, new go.Binding("text", "dataType"), { row: 1, column: 3, margin: new go.Margin(2, 10, 2, 4) }),
                $go(go.TextBlock, new go.Binding("text", "remark"), { row: 1, column: 4, margin: new go.Margin(2, 10, 2, 4) })
            )
        );
    // 节点模板
    myDiagram.nodeTemplate =
        $go(go.Node, "Auto",
            {
                selectionAdorned: true,
                resizable: true,
                layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
                fromSpot: go.Spot.AllSides,
                toSpot: go.Spot.AllSides,
            },
            new go.Binding("location", "location").makeTwoWay(),
            new go.Binding("desiredSize", "visible", function(v) {
                return new go.Size(NaN, NaN);
            }).ofObject("LIST"),
            $go(go.Shape, "RoundedRectangle", {
                fill: 'white',
                stroke: "#000",
                strokeWidth: 1
            }),
            $go(go.Panel, "Table", {
                    defaultRowSeparatorStroke: "black",
                },
                // 表格头部表明名称
                $go(go.TextBlock, {
                        row: 0,
                        alignment: go.Spot.Center,
                        margin: new go.Margin(5, 24, 5, 24),
                        font: "bold 14px sans-serif"
                    },
                    new go.Binding("text", "key")
                ),
                $go(go.Panel, "Vertical", {
                        name: "LIST",
                        row: 1,
                        padding: 3,
                        alignment: go.Spot.TopLeft,
                        defaultAlignment: go.Spot.Left,
                        stretch: go.GraphObject.Horizontal,
                        itemTemplate: itemTempl
                    },
                    new go.Binding("itemArray", "items"))
            )
        );
    myDiagram.linkTemplate =
        $go(go.Link,
            {
                selectionAdorned: true,
                layerName: "Foreground",
                reshapable: true,
                routing: go.Link.AvoidsNodes,
                corner: 5,
                curve: go.Link.JumpOver
            },
            $go(go.Shape,
                { strokeWidth: 2, stroke: '#303B45' }),
            $go(go.Shape,
                { toArrow: "Standard", fill: '#303B45', stroke: null })
        );
    var params = {};
    params.tableId = id;
    var resultJson;
    var config = {
        url: prefix + (type==2?"/tableRef2":"/tableRef"),
        type: "POST",
        dataType: "json",
        async: false,
        data: params,
        success: function (result) {
            resultJson = result;
        }
    };
    $.ajax(config);
    // 表格内部数据
    var nodeDataArray = resultJson.nodeDataArray;
    //数据块关联关系
    var linkDataArray = resultJson.linkDataArray;
    myDiagram.model = $go(go.GraphLinksModel, {
        copiesArrays: true,
        copiesArrayObjects: true,
        nodeDataArray: nodeDataArray,
        linkDataArray: linkDataArray
    });
</script>
</html>
